<template>
  <div class="dispatches">
    <header-bar title="收文查询"></header-bar>
    <div class="content-wrapper">
      <div class="content"  ref="scroll">
        <group title="搜索条件" class="form">
          <cell-box>
            <div class="icon-wrapper">
              <icon name="clock" :scale="2"></icon>
            </div>
            <div class="picker-wrapper" style="margin-left: 15px;">
              <span>起</span>
              <button class="datetime-btn" @click="showDatetime">{{form.datetime}}</button>
              <span>止</span>
              <button class="datetime-btn" @click="showDatetime">{{form.datetime}}</button>
            </div>
          </cell-box>
          <cell-box>
            <div class="icon-wrapper">
              <icon name="serial-number" :scale="2"></icon>
            </div>
            <x-input placeholder="编号" v-model="form.number"></x-input>
          </cell-box>
          <cell-box>
             <div class="icon-wrapper">
              <icon name="word" :scale="2"></icon>
            </div>
            <x-input placeholder="关键字" v-model="form.keyword"></x-input>
          </cell-box>
        </group>
        <x-button class="search-btn" @click.native="search">搜索</x-button>
      </div>
    </div>
    <router-view class="child-view"></router-view>
  </div>
</template>

<script>
  import BScroll from 'better-scroll'
  import {
    Group,
    Cell,
    CellBox,
    XInput,
    XButton,
    Datetime
  } from 'vux'
  import HeaderBar from '@/components/HeaderBar'

  export default {
    components: {
      Group,
      Cell,
      CellBox,      
      HeaderBar,
      XInput,
      XButton
    },
    data(){
      return {
        form: {
          datetime: '2017-08-21',
          number: '',
          keywords: ''
        }
      }
    },
    methods: {
      _initScroll(){
        this.scroll = new BScroll(this.$refs.scroll)
      },
      showDatetime(){
        console.log(this.$vux)
        let _this = this
        this.$vux.datetime.show({
          cancelText: '取消',
          confirmText: '确定',
          format: 'YYYY-MM-DD',
          value: '2017-05-20 18',
          onConfirm (val) {
            console.log('plugin confirm', val)
            _this.form.datetime = val
          },
          onShow () {
            console.log('plugin show')
          },
          onHide () {
            console.log('plugin hide')
          }
        })
      },
      search(){
        console.log('fff')
        this.$router.push({
          name: 'dispatchSearchList'
        })
      }
    },
    mounted(){
      setTimeout(() => {
        this._initScroll()
      }, 20)
    }
  }
</script>

<style lang="less" scoped>
  @import '~@/styles/variables.less';

  .dispatches{
    background-color: @color-background-main;
    .content-wrapper{
      position: absolute;
      top: @height-header-bar;
      bottom: 0;
      width: 100%;
      .content{
        width: 100%;
        height: 100%;
        .form{
          .datetime-btn{
            padding: 10px 15px;
            font-size: 17px;
            outline: none;
            border: none;
            background-color: transparent;
          }
        }
        .search-btn{
          margin-top: 40px;
          margin-bottom: 20px;
        }
      }
    }
    .child-view{
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
    }
  }
</style>

